<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta http-equiv="Pragma" content="no-cache" />
	</head>

	<body>
		<input type="file" id="audio" />
		<div id="handler_info"></div>
		<div class="progressbar"></div>
	</body>
	<script src="js/spark-md5.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$("#audio").on("change", function() {
			let file = $("#audio")[0].files[0];
			if(!file) {
				$("#audio_name").text('选择音频');
				$(".progressbar").attr('value', 0);
				$("#handler_info").html('');
				filemd5 = '';
			} else {
				$("#audio_name").text(file.name);
				get_filemd5sum(file)
			}
		});

		function get_filemd5sum(ofile) {
			var file = ofile;
			var tmp_md5;
			var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
				// file = this.files[0],
				chunkSize = 8097152, // Read in chunks of 2MB
				chunks = Math.ceil(file.size / chunkSize),
				currentChunk = 0,
				spark = new SparkMD5.ArrayBuffer(),
				fileReader = new FileReader();

			fileReader.onload = function(e) {
				// console.log('read chunk nr', currentChunk + 1, 'of', chunks);
				spark.append(e.target.result); // Append array buffer
				currentChunk++;
				var md5_progress = Math.floor((currentChunk / chunks) * 100);
				console.log(file.name + "  正在处理，请稍等," + "已完成" + md5_progress + "%");
				var handler_info = document.getElementById("handler_info");
				var progressbar = document.getElementsByClassName("progressbar")[0];
				handler_info.innerHTML = file.name + "  正在处理，请稍等," + "已完成" + md5_progress + "%"
				progressbar.value = md5_progress;
				if(currentChunk < chunks) {
					loadNext();
				} else {
					tmp_md5 = spark.end();
					filemd5 = tmp_md5;
					console.log(tmp_md5)
					handler_info.innerHTML = file.name + "的MD5值是：" + tmp_md5;
				}
			};

			fileReader.onerror = function() {
				console.warn('oops, something went wrong.');
			};

			function loadNext() {
				var start = currentChunk * chunkSize,
					end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
				fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
			}
			loadNext();
		}
	</script>
</html>